<template>
    <div class="content">
        <TableLayout form-title="">
        <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline" class="formInline" label-width="100px" slot="form">          
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省">
                            <province v-model="formInline.fProvinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市">
                            <city v-model="formInline.fCityId" :province="formInline.fProvinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县">
                            <region v-model="formInline.fAreaId" :city="formInline.fCityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="负责人姓名">
                            <el-input v-model="formInline.leadName" placeholder="请输入负责人姓名" :maxlength="6"></el-input>
                        </el-form-item>
                    </el-col>
                   
                    <el-col :span="8">
                        <el-form-item label="审核状态">
                            <el-select v-model="formInline.status" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.statusList" :key="item.statusNum" :label="item.statusName" :value="item.statusNum">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="银行账户类型">
                            <el-select v-model="formInline.accountType" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in formInline.accountTypeList" :key="item.statusNum" :label="item.statusName" :value="item.statusNum">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="top-line">
                    <el-col :span="4" :offset="20"> 
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="dataApply" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" ref="multipleTable">
                
                <el-table-column align="center" label="提交时间" min-width="140">
                    <template scope="scope">
                        <span>{{scope.row.auditTime || '--'}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column align="center" label="经销商名称" min-width="160">
                    <template scope="scope">
                        <span>{{scope.row.orgName || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="负责人" prop="name"></el-table-column>

                <el-table-column align="center" label="手机号" prop="mobile" min-width="120"></el-table-column>

                <el-table-column align="center" label="代理区域">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="nameDetail(scope.row.orgId)">详情</el-button>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="银行账户类型">
                    <template scope="scope">
                        <span v-if='scope.row.orgState == 0'>对公账户</span>
                        <span v-if='scope.row.orgState == 1'>个人账户</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="审核状态">
                    <template scope="scope">
                        <span v-if='scope.row.status == 0'>通过</span>
                        <span v-if='scope.row.status == 1'>未审核</span>
                        <span v-if='scope.row.status == 2'>驳回</span>
                    </template>
                </el-table-column>
                    
                <el-table-column align="center" label="审核时间" min-width="140">
                    <template scope="scope">
                        <span>{{scope.row.finishTime || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="center" label="审核人" min-width="92">
                    <template scope="scope">
                        <span>{{scope.row.userName || '--'}}</span>
                    </template>
                </el-table-column>

                <el-table-column align="left" label="操作" width="90">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" v-if='scope.row.status != 1' @click="goCheckExam(scope.row.id,scope.row.orgId)">查看</el-button>
                        <el-button type="text" class="btn-success" v-if='scope.row.status == 1' @click="goExam(scope.row.id,scope.row.orgId)">审核</el-button>
                    </template>
                </el-table-column>      
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="查看代理区域" :visible.sync="dialogFormVisible1" size="tiny">
            <div class="checkImg2">
                <table class="dialogTable" align="center">
                    <tr v-for='(item,index) in areaList' :key="index"><td>代理区域{{index+1}}</td><td>{{item}}</td></tr>
                </table>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogFormVisible1=false">确定</el-button>
            </div>
        </el-dialog> 
    </div>
</template>

<script>
import TableLayout from 'components/TableLayout';
import {pageOrgAccount, address} from 'api/examineMangement';
import { mapState, mapActions, mapGetters } from 'vuex';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
export default{
    components: {TableLayout, province, city, region, school},
    data() {
        return {
            formInline: {// form表单数据
                fProvinceId: '',
                fAreaId: '',
                fCityId: '',
                province: [],
                findCity: [],
                findArea: [],
                orgName: '',
                leadName: '',
                accountType: '',
                status: '',
                accountTypeList: [
                    {
                        statusNum: '',
                        statusName: '全部'
                    },
                    {
                        statusNum: '1',
                        statusName: '个人账户'
                    },
                    {
                        statusNum: '0',
                        statusName: '对公账户'
                    }
                ],
                statusList: [
                    {
                        statusNum: '',
                        statusName: '全部'
                    },
                    {
                        statusNum: '0',
                        statusName: '通过'
                    },
                    {
                        statusNum: '1',
                        statusName: '未审核'
                    },
                    {
                        statusNum: '2',
                        statusName: '驳回'
                    }
                ],
                accountStatus: ''
            },
            dataApply: [],
            areaList: [], // 负责区域
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            dialogFormVisible1: false
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        }),
        ...mapGetters([
            'uid'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    
    methods: {
        // 全局获取行数
        ...mapActions(['ChangePageSize']),
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
  
        // 分页
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.searchFetchData();
        },
        nameDetail(orgId) {
            address(orgId).then(res => {
                this.areaList = res.data.content;
            })
            this.dialogFormVisible1 = true;
        },
        // 查询列表
        searchFetchData() {
            this.loading = true;
            pageOrgAccount(this.listQuery.page, this.config.pageSize, this.formInline.fProvinceId, this.formInline.fCityId, this.formInline.fAreaId, this.formInline.status, this.formInline.accountType, this.formInline.leadName).then(response => {              
                if (response.data.status==200) {
                    this.dataApply = response.data.content.list;
                    this.listQuery.total = response.data.content.pagination.total;
                    this.loading = false;    
                }
            });
        },
        onSubmit() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
        // 跳转
        goExam(row1, row2) {
            this.$router.push({path: `examDetail/${row1}/${row2}/1`});
        },
        goCheckExam(row1, row2) {
            this.$router.push({path: `checkExam/${row1}/${row2}/1`});
        }
    }
}
</script>
<style lang="scss" scoped>
.content {
    position: relative;
    padding: 0px;
    $bgcolor:#fff;
    label{
        text-align:left;
    }
    .formInline {
        .formBtn{
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition{
                position: absolute;
                right:0px; 
                top: 18px;
            }
        }
    }
    .dialog-footer{
        .el-button{
            margin: 20px 0 10px 0;
        }
        text-align: center;
    }
    .dialogTable{
        text-align:center;
        margin:30px auto;       
        th,td{
            text-align:center;
            padding:0 20px;
            border: solid 1px #ECECEC;
            width:220px;
            height:40px;
        }
        tr td:nth-of-type(1){
            width:30%;
        }
        tr td:nth-of-type(2){
            width:310px;
        }
    }
}
</style> 